/**
 * @author Adam Charron <adam.c@vanillaforums.com>
 * @copyright 2009-2025 Vanilla Forums Inc.
 * @license gpl-2.0-only
 */

import { ImageAsElementWide } from "@library/banner/Banner.Part1.story";
import { StoryBannerWithScope } from "@library/banner/Banner.storyFixtures";
import { BannerAlignment, type SearchPlacement } from "@library/banner/Banner.variables";
import { SearchBarPresets } from "@library/banner/SearchBarPresets";
import { ButtonPreset } from "@library/forms/ButtonPreset";
import { oneColumnVariables } from "@library/layout/Section.variables";
import { storyWithConfig } from "@library/storybook/StoryContext";
import { STORY_LOGO_WHITE } from "@library/storybook/storyData";
import { globalVariables } from "@library/styles/globalStyleVars";
import { color, linearGradient } from "csx";

const globalVars = globalVariables();

export default {
    title: "Widgets/Banner",
    parameters: {
        chromatic: {
            viewports: [1400, 400],
        },
    },
};

export const Shadowed = storyWithConfig(
    {
        useWrappers: false,
        themeVars: {
            banner: {
                searchBar: {
                    shadow: {
                        show: true,
                    },
                },
            },
        },
    },
    () => <StoryBannerWithScope title="Search with shadow" />,
);

export const SearchShadowNoSearchButton = storyWithConfig(
    {
        useWrappers: false,
        themeVars: {
            global: {
                mainColors: {
                    // primary: color("#4fb33f"),
                },
                body: {
                    backgroundImage: {
                        color: color("#efefef"),
                    },
                },
            },
            banner: {
                searchBar: {
                    shadow: {
                        show: true,
                    },
                },
                options: {
                    alignment: BannerAlignment.LEFT,
                },
                rightImage: {
                    image: "https://user-images.githubusercontent.com/1770056/73629535-7fc98600-4621-11ea-8f0b-06b21dbd59e3.png",
                },
                padding: {
                    top: 87,
                    bottom: 87,
                },
                presets: {
                    button: {
                        preset: ButtonPreset.HIDE,
                    },
                    input: {
                        preset: SearchBarPresets.BORDER,
                    },
                },
            },
        },
    },
    () => <StoryBannerWithScope title="Image as Element - (With Left Alignment)" />,
);

export const searchPositionBottom = storyWithConfig(
    {
        useWrappers: false,
        themeVars: {
            banner: {
                presets: {
                    input: {
                        preset: SearchBarPresets.NO_BORDER,
                    },
                },
                options: {
                    searchPlacement: "bottom" as SearchPlacement,
                },
                backgrounds: {
                    useOverlay: true,
                },
                searchStrip: {},
            },
        },
    },
    () => <StoryBannerWithScope title="Search on bottom" />,
);
export const searchPositionBottomWithOverlayAndOffset = storyWithConfig(
    {
        useWrappers: false,
        themeVars: {
            banner: {
                presets: {
                    input: {
                        preset: SearchBarPresets.BORDER,
                    },
                    button: {
                        preset: ButtonPreset.TRANSPARENT,
                    },
                },
                options: {
                    searchPlacement: "bottom" as SearchPlacement,
                },
                backgrounds: {
                    useOverlay: true,
                },
                outerBackground: {
                    position: "50% 100%",
                    color: color("#54367c"),
                    image: "https://us.v-cdn.net/5022541/uploads/091/7G8KTIZCJU5S.jpeg",
                },
                dimensions: {
                    mobile: {
                        minHeight: 200,
                    },
                },
                contentContainer: {
                    padding: {
                        bottom: 140,
                    },
                    mobile: {
                        padding: {
                            top: 30,
                            bottom: 100,
                        },
                    },
                },
                searchStrip: {
                    bg: linearGradient("to bottom", "rgb(0,0,0,0) 0%,rgba(0,0,0, .4) 50%"),
                    minHeight: 140,
                    offset: -140,
                    padding: {
                        top: 0,
                        bottom: 70,
                    },
                    mobile: {
                        minHeight: 100,
                        offset: -100,
                        padding: {
                            bottom: 15,
                        },
                    },
                },
            },
        },
    },
    () => <StoryBannerWithScope title="Search on bottom with negative offset" />,
);

export const searchBarNoImage = storyWithConfig(
    {
        useWrappers: false,
        themeVars: {
            colors: {
                primary: "#ff5b64",
                primaryContrast: "#e3e3e3",
            },
            banner: {
                presets: {
                    input: {
                        preset: SearchBarPresets.BORDER,
                    },
                },
                options: {
                    hideDescription: true,
                    hideTitle: true,
                },
                backgrounds: {
                    useOverlay: true,
                },
                outerBackground: {
                    color: color("#54367c"),
                    unsetBackground: true,
                },
            },
        },
    },
    () => <StoryBannerWithScope title="Only search bar, no image" onlyOne={true} />,
);

export const bannerImageOnly = storyWithConfig(
    {
        useWrappers: false,
        themeVars: {
            colors: {
                primary: "#ff5b64",
                primaryContrast: "#e3e3e3",
            },
            banner: {
                presets: {
                    input: {
                        preset: SearchBarPresets.BORDER,
                    },
                },
                options: {
                    hideSearch: true,
                    hideDescription: true,
                    hideTitle: true,
                },
                dimensions: {
                    minHeight: 300,
                    mobile: {
                        minHeight: 200,
                    },
                },
                outerBackground: {
                    position: "50% 100%",
                    color: color("#54367c"),
                    image: "https://us.v-cdn.net/5022541/uploads/091/7G8KTIZCJU5S.jpeg",
                    breakpoints: {
                        mobile: {
                            image: "https://us.v-cdn.net/5022541/uploads/470/U68ZI0LRPRBQ.png",
                        },
                    },
                },
            },
        },
    },
    () => <StoryBannerWithScope title="Banner Image Only" onlyOne={true} />,
);

ImageAsElementWide.parameters = {
    chromatic: {
        viewports: [1450, 1350, oneColumnVariables().breakPoints.oneColumn, 400],
    },
};

export const ContentBannerNoLogo = storyWithConfig(
    {
        useWrappers: false,
        themeVars: {
            contentBanner: {
                options: {
                    enabled: true,
                },
            },
        },
    },
    () => {
        return <StoryBannerWithScope title="Should not appear" isContentBanner onlyOne={true} />;
    },
);

export const ContentBannerLogo = storyWithConfig(
    {
        useWrappers: false,
        themeVars: {
            contentBanner: {
                options: {
                    enabled: true,
                },
                logo: {
                    image: STORY_LOGO_WHITE,
                    width: 150,
                },
            },
        },
    },
    () => {
        return <StoryBannerWithScope title="Should not appear" isContentBanner onlyOne={true} />;
    },
);

export const ContentBannerIcon = storyWithConfig(
    {
        useWrappers: false,
        themeVars: {
            global: {
                body: {
                    backgroundImage: {
                        color: color("#efefef"),
                    },
                },
            },
            contentBanner: {
                options: {
                    alignment: "left",
                    enabled: true,
                    hideIcon: false,
                    hideTitle: false,
                    hideDescription: false,
                },
                spacing: {
                    padding: {
                        top: 30,
                        bottom: 30,
                    },
                },
                outerBackground: {
                    unsetBackground: true,
                },
                icon: {
                    image: "https://us.v-cdn.net/5022541/uploads/341/G35SLM2LBY4G.png",
                },
            },
        },
    },
    () => <StoryBannerWithScope title="Content Banner with Icon" isContentBanner onlyOne />,
);

export const UnifiedBorder = storyWithConfig(
    {
        useWrappers: false,
        themeVars: {
            banner: {
                presets: {
                    input: {
                        preset: SearchBarPresets.UNIFIED_BORDER,
                    },
                },
                backgrounds: {
                    useOverlay: true,
                },
                outerBackground: {
                    color: color("#d4d4d4"),
                    unsetBackground: true,
                },
            },
        },
    },
    () => <StoryBannerWithScope title="Standard" />,
);

export const UnifiedBorderSquare = storyWithConfig(
    {
        useWrappers: false,
        themeVars: {
            banner: {
                presets: {
                    input: {
                        preset: SearchBarPresets.UNIFIED_BORDER,
                    },
                },
                border: {
                    radius: 0,
                },
                backgrounds: {
                    useOverlay: true,
                },
                outerBackground: {
                    color: color("#d4d4d4"),
                    unsetBackground: true,
                },
            },
        },
    },
    () => <StoryBannerWithScope title="Standard" />,
);

export const UnifiedBorderRound = storyWithConfig(
    {
        useWrappers: false,
        themeVars: {
            banner: {
                presets: {
                    input: {
                        preset: SearchBarPresets.UNIFIED_BORDER,
                    },
                },
                border: {
                    radius: 20,
                },
                backgrounds: {
                    useOverlay: true,
                },
                outerBackground: {
                    color: color("#d4d4d4"),
                    unsetBackground: true,
                },
            },
        },
    },
    () => <StoryBannerWithScope title="Standard" />,
);

export const SearchOnBgColor = storyWithConfig(
    {
        useWrappers: false,
        themeVars: {
            banner: {
                colors: {
                    bg: globalVars.mainColors.bg,
                    fg: globalVars.mainColors.fg,
                },
                font: {
                    color: globalVars.mainColors.fg,
                    shadow: "none",
                },
                backgrounds: {
                    useOverlay: false,
                },
                outerBackground: {
                    color: globalVars.mainColors.bg,
                    unsetBackground: true,
                },
                presets: {
                    button: {
                        preset: ButtonPreset.SOLID,
                    },
                    input: {
                        preset: SearchBarPresets.BORDER,
                    },
                },
            },
        },
    },
    () => (
        <>
            <StoryBannerWithScope
                title="Search on bg color"
                description={`Note that this isn't really "banner" related, but since the other variations for the search are here, it makes sense to have them side by side.`}
            />
        </>
    ),
);

export const SearchOnBgColorRound = storyWithConfig(
    {
        useWrappers: false,
        themeVars: {
            banner: {
                colors: {
                    bg: globalVars.mainColors.bg,
                    fg: globalVars.mainColors.fg,
                },
                font: {
                    color: globalVars.mainColors.fg,
                    shadow: "none",
                },
                backgrounds: {
                    useOverlay: false,
                },
                outerBackground: {
                    color: globalVars.mainColors.bg,
                    unsetBackground: true,
                },
                presets: {
                    button: {
                        preset: ButtonPreset.SOLID,
                    },
                    input: {
                        preset: SearchBarPresets.BORDER,
                    },
                },
                border: {
                    radius: 20,
                },
            },
        },
    },
    () => (
        <>
            <StoryBannerWithScope
                title="Search on bg color"
                description={`Note that this isn't really "banner" related, but since the other variations for the search are here, it makes sense to have them side by side.`}
            />
        </>
    ),
);
